<template>
  <div>
    <el-form ref="myForm" :model="formData" label-width="100px">
      <el-row>
        <el-col :sm="12" :md="8" :lg="6">
          <el-form-item label="栏目" prop="t_cat_fk">
            <cat-list v-model="formData.t_cat_fk"></cat-list>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button
          type="primary"
          @click.prevent="handleQuery(1)"
          native-type="submit"
          >查询</el-button
        >
        <el-button @click="handleReset(myForm)">重置</el-button>
        <el-button
          v-if="$store.getters.hasFun('/banner/insert')"
          type="primary"
          @click="handleShow({ insert: true })"
          >增加</el-button
        >
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      height="calc(100vh - 220px)"
    >
      <el-table-column prop="cat_name" label="栏目" />
      <el-table-column label="banner图">
        <template #default="{ row }">
          <img :src="row.image_path" class="banner-img" />
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column prop="update_time" label="修改时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            v-if="$store.getters.hasFun('/banner/update')"
            @click="handleShow({ update: true }, scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :currentPage="formData.page"
      :page-size="formData.rows"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <insert
      :dialogVisible="showObject.insert"
      v-if="useObject.insert"
      @close="handleClose"
    ></insert>
    <update
      :dialogVisible="showObject.update"
      v-if="useObject.update"
      :row="row"
      @close="handleClose"
    ></update>
  </div>
</template>

<script setup lang="ts">
import update from "./banner-update";
import insert from "./banner-insert";
import listSetup from "@/util/list";
import CatList from "../public/cat-list";

let {
  myForm,
  formData,
  count,
  showObject,
  useObject,
  tableData,
  row,
  handleReset,
  handleShow,
  handleQuery,
  handleClose,
  handleDelete,
  handleCurrentChange,
  handleSizeChange,
} = listSetup("banner");

handleReset();
</script>

<style scoped>
.el-table {
  margin-top: 15px;
}

.banner-img {
  width: 200px;
  height: auto;
}
</style>